/**
 * @author zhangqiang
 * @data 2017/3/14
 *  地址列表
 * */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Tabs } from 'antd-mobile'
import { getOrderList } from '../../actions/orderListActions'
import {
	NoData
} from '../../components/orderList'
import ListTab from '../../../../../../../src/js/components/order/listTab';
import ListCard from '../../../../../../../src/js/components/order/listCard';
import BottomMenu from '../../../../../../../src/js/components/bottomMenu';
import 'style/orderList.scss'
import style from './index.scss'
import common from '../../utils/common'
const TabPane = Tabs.TabPane;

class OrderList extends Component {
	constructor(props) {
		super(props)
		this.state = {
			orderList: [],
			isShow: true,
			tagIndex: parseInt(sessionStorage.getItem('tagIndex'))||0
		}
		this.cache = [[], [], []];
        this.handleIndexChange = this.handleIndexChange.bind(this);
	}

	toUrl(url) {
		this.context.router.push(url);
	}

	componentDidMount() {
		common.setViewTitle('我的订单');
		this.handleIndexChange(0);
	}

	//处理Tab标签变化
    handleIndexChange(index) {
        sessionStorage.setItem('tagIndex', index);
        this.setState({
            isShow: true
        });

        //如已加载则直接读取缓存
        if (this.cache[index] && this.cache[index].length > 0) {
            this.setState({
                orderList: this.cache[index],
                isShow: false
            })
        }
        else {
            let getData = {
                bizFlag: index + 1,
                orderType: 10
            };
            this.props.dispatch(getOrderList(getData, (res) => {
                this.setState({
                    orderList: res,
                    isShow: false,
                });
                this.cache[index] = res;
            }))
        }
	}
	
    bottomHandle(index) {
        if (index == 0) {
            this.context.router.push('/');
        }
        else {
            this.context.router.push('orderList');
        }
    }

	render() {
		return (
			<div className={style.orderList} style={{ paddingBottom: '1rem' }}>

				<ListTab
					handleIndexChange={this.handleIndexChange}
					tagIndex = {this.state.tagIndex}
                />
				{
                    this.state.isShow ? <div className={style.load}>加载中......</div> :
                        this.state.orderList.length ? this.state.orderList.map((item, index) =>
                            <ListCard
                                key={item.orderId} order={item} icon="./images/mine_order_logo.png" handleClick={() => {
								this.toUrl(`orderDetails/${item.orderId}/${item.chargeOrderId}`)
                            }}
                            />
                        ) : <NoData/>
                }
				{/*底部导航菜单start*/}
				<BottomMenu active={1} onChange={(index) => {
                        this.bottomHandle(index);
                    }} data={[{
                        text: '车辆年检',
                        img: './images/year.png',
                        checkedImg: './images/year_selected.png'
                    }, {text: '我的订单', img: './images/mine.png', checkedImg: './images/mine_selected.png'}]}/>
				{/*底部导航菜单end*/}
			</div>
		)
	}
}

//使用context
OrderList.contextTypes = {
	router: React.PropTypes.object.isRequired
};

OrderList.defaultProps = {
	data: [],
	index: ['', ''],
	headTag: [   //标签头部
		{
			name: '办理中',
			key: 1
		}, {
			name: '已完成',
			key: 2
		}, {
			name: '全部订单',
			key: 3
		}
	],
	orderList: [],
	list: []
};

function mapStateToProps(state) {
	return Object.assign({}, state.orderList);
}

export default connect(mapStateToProps)(OrderList)